<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<script src="/static/js/jquery3.4.1.js"></script>
<body>


<h1>欢迎光临</h1>
<h1>测试</h1>

<input id="mail" class="mail" type="email" name="email" placeholder="Your Mail" required>
<button id="btn-pin" class="btn-pin">获取验证码</button>


<script>
    $(document).ready(function () {
        let timer;

        function Countdown(obj) {
            if (timer >= 1) {
                obj.attr("disabled", true).text("重新发送(" + timer + ")");
                timer--;
                setTimeout(function () {
                    Countdown(obj);
                }, 1000);
            } else {
                obj.attr("disabled", false).text("重新发送");
            }
        }

        $("#btn-pin").on("click", function () {
            let mail = $("#mail").val();
            if (mail) {
                // 向后端发送请求

                // 重新发送倒计时
                timer = 60;
                Countdown(obj = $("#btn-pin"));
            }
        });
    });
</script>
</body>
</html>